<template>
  <div class="fllow-details">
    <m-header title="普通订单详情"></m-header>
    <div class="plan-info vtop">
      <cate-cell :img="cateImg" imgWidth="0.06rem" title="订单详细"></cate-cell>
      <follow-cell title="彩种" :content="billData.lottery_name"></follow-cell>
      <follow-cell title="订单金额" :content="`${billData.total_price || 0}元`" :customStyle="{color: '#D44743'}"></follow-cell>
      <follow-cell title="订单状态" :content="billData.state_name" :customStyle="{color: '#D44743'}"></follow-cell>
      <follow-cell title="奖金" :content="`${billData.total_bonus_price || 0}元`" :customStyle="{color: '#D44743'}"></follow-cell>
      <follow-cell title="投注信息" :content="billData.mode_list&&billData.mode_list.join(' ') || ''"></follow-cell>
      <follow-cell title="下单时间" :content="billData.create_time"></follow-cell>
      <follow-cell title="订单编号" :content="billData.order_sn"></follow-cell>
      <follow-cell title="保密等级" v-if="billData.secrecy_level==2" content="保密"></follow-cell>
      <follow-cell title="保密等级" v-else-if="billData.secrecy_level==3" content="赛后公开"></follow-cell>
      <follow-cell title="保密等级" v-else content="公开"></follow-cell> <!-- 1 -->
    </div>
    <div class="fllow-detail vtop">
      <cate-cell :img="cateImg" imgWidth="0.06rem" title="投注详情"></cate-cell>
      <div class="no-detail" v-if="!(followBetData&&followBetData.length)">开赛后可查看投注信息</div>
      <div class="bet-detail" v-else>
        <div class="bet-type">
          <div>场次</div>
          <div>主队vs客队</div>
          <div>玩法</div>
          <div>投注</div>
          <div>彩果</div>
        </div>
        <div class="bet-item" v-for="(item,index) in followBetData" :key="index">
          <div class="week-bet">{{`${item.week_str}${item.issue_num}`}}</div>
          <div class="team">
            <div>{{item.team_team_name}}</div>
            <div>{{`${item.home_team_score}：${item.guest_team_score}`}}</div>
            <div>{{item.guest_team_name}}</div>
          </div>
          <div class="play-result">
            <div class="pay-items" v-for="(itms,idxs) in item.play_list" :key="idxs">
              <div class="plays">
                <div>{{itms.play_name}}</div>
              </div>
              <div class="follow-list">
                <div class="follow-items" v-for="(itm,idx) in itms.bet_list" :key="idx">
                  <div class="follows">
                    <div>{{`${itm.bet} ${itm.bonus_rate}`}}</div>
                  </div>
                  <div class="results">
                    <div>{{itm.bet_raw}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fllow-desc">温馨提示：中奖后奖金自动打入您账户。</div>
    <div class="fllow-btn" @click="handleFollow">
      <span v-if="billData.lottery_type=='1'">竞彩足球投注</span>
      <span v-else>竞彩篮球投注</span>
    </div>
  </div>
</template>
<script>
import FllowItem from '@/components/FllowItem';
import CateCell from '@/components/CateCell';
import FollowCell from '@/components/FollowCell';
import { mapActions } from 'vuex';

export default {
  components: {
    FllowItem,
    CateCell,
    FollowCell
  },
  data () {
    return {
      billData: { // 方案信息和基础信息
        total_price: '',
        min_price: '',
        bill_total_price: ''
        // avatar: 'https://www.try255.com/statics/avatar/1_160.png',
        // bet_rate: '1',
        // bill_id: 7,
        // bill_total_num: 0,
        // bill_total_price: 0,
        // commission_rate: '11%',
        // create_time: '2019-02-27 22:10:41',
        // desc: '测试发单文案',
        // end_time: '0',
        // is_bet: 0,
        // lottery_name: '竞彩足球',
        // lottery_type: '1',
        // member_id: '1',
        // min_price: '2',
        // mode_list: ['二串一'],
        // nickname: '嘻嘻啊1',
        // order_sn: 'D20190227919472',
        // secrecy_level: '1',
        // state: '1',
        // state_name: '停止招募',
        // status: '1',
        // straight_price: 2,
        // total_price: '2'
      },
      followBetData: [ // 投注详情
        // {
        //   play_list: [
        //     {
        //       play: 'rq',
        //       play_name: '让球',
        //       bet_list: [
        //         {
        //           bet: '主负',
        //           bonus_rate: '1.53',
        //           bet_raw: '主胜',
        //           state_name: '待开奖',
        //           state: '0'
        //         }
        //       ]
        //     }
        //   ],
        //   bonus_rate: '1.53',
        //   home_team_score: '0',
        //   guest_team_score: '0',
        //   team_team_name: '布里斯托城',
        //   guest_team_name: '哈德斯菲尔德',
        //   concede_num: '-1',
        //   issue_num: '128',
        //   week_str: '周六'
        // },
        // {
        //   play_list: [
        //     {
        //       play: 'rq',
        //       play_name: '让球',
        //       bet_list: [
        //         {
        //           bet: '主负',
        //           bonus_rate: '4.50',
        //           bet_raw: '主胜',
        //           state_name: '待开奖',
        //           state: '0'
        //         }
        //       ]
        //     }
        //   ],
        //   bonus_rate: '4.50',
        //   home_team_score: '0',
        //   guest_team_score: '0',
        //   team_team_name: '红星',
        //   guest_team_name: '卡昂',
        //   concede_num: '1',
        //   issue_num: '127',
        //   week_str: '周六'
        // }
      ],
      followBet: 1,
      cateImg: require('../../../assets/imgs/cell/cate4@2x.png')
    };
  },
  filters: {
    fmatLevel (val) { // 1公开 2保密 3赛后公开
      switch (val) {
        case 1: return '公开';
        case 2: return '保密';
        case 3: return '赛后公开';
      }
    }
  },
  mounted () {
    const query = this.$route.params;
    if (query.id) {
      this.getOrderInfo(query.id);
    }
  },
  methods: {
    ...mapActions({
      getOrderDetail: 'mine/getOrderDetail' // 普通订单详情
    }),
    getOrderInfo (orderSn) {
      this.getOrderDetail({ order_sn: orderSn }).then(res => {
        if (res) {
          this.billData = res.order_info || {};
          this.followBetData = res.bet_info || [];
        }
      });
    },
    handleCell () {
      this.$router.push({ path: `/follow/detail/${this.billData.bill_id}` });
    },
    handleFollow () {
      if (Number(this.billData.lottery_type) === 1) { // 竞彩足球
        this.$router.push({ path: `/football` });
      } else { // 竞彩篮球
        this.$router.push({ path: `/basketball` });
      }
    }
  }
};
</script>
<style lang='less' scoped>
@import "../../../assets/styles/mixins.less";
.fllow-details {
  padding-top: 0.92rem;
  padding-bottom: 1rem;
  background: #f7f7f7;
  // overflow: auto;
  .fllow-detail {
    background: #ffffff;
    padding-bottom: 0.2rem;
    .no-detail {
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.22rem;
      color: #999999;
      text-align: center;
      letter-spacing: 0.06rem;
    }
    .bet-detail {
      margin: 0.2rem;
      margin-bottom: 0;
      text-align: center;
      // border: 0.01rem solid #D2D2D2;
      .border-1px(#d2d2d2);
      .bet-type {
        display: flex;
        height: 0.8rem;
        font-size: 0.24rem;
        color: #333333;
        background: #F3F3F3;
        box-sizing: border-box;
        & > div {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .border-1px-left(#d2d2d2);
          &:first-child {
            border: none;
          }
        }
      }
      .bet-item {
        display: flex;
        min-height: 1rem;
        font-size: 0.22rem;
        color: #666666;
        box-sizing: border-box;
        .border-1px-top(#d2d2d2);
        & > div {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .play-result {
          flex: 3;
          .pay-items {
            width: 100%;
            display: inline-flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 0.04rem;
            box-sizing: border-box;
            & > div {
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .plays {
              flex: 1;
            }
            .follow-list {
              flex: 2;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 0.04rem;
              box-sizing: border-box;
            }
            .follow-items {
              width: 100%;
              height: 100%;
              display: flex;
              padding: 0.04rem;
              & > div {
                flex: 1;
              }
            }
          }
          .plays,
          .follows,
          .results {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // padding: 0.1rem;
            // box-sizing: border-box;
            & > div {
              width: 100%;
              line-height: 0.32rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .team {
          display: flex;
          justify-content: center;
          align-items: center;
          max-width: 1.5rem;
          & > div {
            width: 100%;
            line-height: 0.32rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
        .result {
          font-size: 0.22rem;
          color: #D44743;
          text-align: center;
        }
      }
    }
  }
  .fllow-desc {
    padding-left: 0.2rem;
    height: 0.56rem;
    line-height: 0.56rem;
    font-size: 0.18rem;
    color: #999999;
  }
  .fllow-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.34rem;
    color: #ffffff;
    text-align: center;
    background: #D44743;
  }
}
</style>
